<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>在线音乐网站</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        @media ( min-width :768px ) {
            #left_tab {
                width: 250px;
                position: absolute;
                z-index: 1;
                height: 640px;
            }
            .mysearch {
                margin: 10px;
            }
            .page_main {
                margin-left: 255px;
            }
            .dv_content{
                width: 100%;
                height: 900px;
            }
        }
        td, th {
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            // 用户界面
            $("#showUser").click(function(){
                // 隐藏其他页面
                hidef();

                // 展示界面
                var id = this.id+'Div';
                var id1 = document.getElementById(id);
                id1.style.display='block';
            });
            // 用户界面
            $("#changePass").click(function(){
                // 隐藏其他页面
                hidef();

                // 展示界面
                var id = this.id+'Div';
                var id1 = document.getElementById(id);
                id1.style.display='block';
            });
            // 类型展示界面
            $("#showGoodsType").click(function(){
                // 隐藏其他页面
                hidef();

                // 展示界面
                var id = this.id+'Div';
                var id1 = document.getElementById(id);
                id1.style.display='block';
            });
            // 品牌展示界面
            $("#showBrand").click(function(){
                // 隐藏其他页面
                hidef();

                // 展示界面
                var id = this.id+'Div';
                var id1 = document.getElementById(id);
                id1.style.display='block';
            });
            // 商品查看界面
            $("#showGoods").click(function(){
                // 隐藏其他页面
                hidef();

                // 展示界面
                var id = this.id+'Div';
                var id1 = document.getElementById(id);
                id1.style.display='block';
            });
            // 商品添加界面
            $("#addGoods").click(function(){
                // 隐藏其他页面
                hidef();

                // 展示界面
                var id = this.id+'Div';
                var id1 = document.getElementById(id);
                id1.style.display='block';
            });
            // 音乐展示界面
            $("#showMusic").click(function(){
                // 隐藏其他页面
                hidef();
                // 展示界面
                var id = this.id+'Div';
                var id1 = document.getElementById(id);
                id1.style.display='block';
            });
            // 音乐添加界面
            $("#addMusic").click(function(){
                // 隐藏其他页面
                hidef();

                // 展示界面
                var id = this.id+'Div';
                var id1 = document.getElementById(id);
                id1.style.display='block';
            });
            // 歌手添加界面
            $("#showSinger").click(function(){
                // 隐藏其他页面
                hidef();
                // 展示界面
                var id = this.id+'Div';
                var id1 = document.getElementById(id);
                id1.style.display='block';
            });
            // 歌手添加界面
            $("#addSinger").click(function(){
                // 隐藏其他页面
                hidef();

                // 展示界面
                var id = this.id+'Div';
                var id1 = document.getElementById(id);
                id1.style.display='block';
            });
            // 歌单添加界面
            $("#showMusicList").click(function(){
                // 隐藏其他页面
                hidef();
                // 展示界面
                var id = this.id+'Div';
                var id1 = document.getElementById(id);
                id1.style.display='block';
            });
            // 歌单添加界面
            $("#addMusicList").click(function(){
                // 隐藏其他页面
                hidef();

                // 展示界面
                var id = this.id+'Div';
                var id1 = document.getElementById(id);
                id1.style.display='block';
            });
            // 订单查看界面
            $("#showOrder").click(function(){
                // 隐藏其他页面
                hidef();

                // 展示界面
                var id = this.id+'Div';
                var id1 = document.getElementById(id);
                id1.style.display='block';
            });
        })
        // 隐藏
        var hidef = function () {
            document.getElementById('showUserDiv').style.display='none';
            document.getElementById('changePassDiv').style.display='none';

            document.getElementById('showGoodsTypeDiv').style.display='none';
            document.getElementById('showBrandDiv').style.display='none';
            document.getElementById('showGoodsDiv').style.display='none';
            document.getElementById('addGoodsDiv').style.display='none';

            document.getElementById('showMusicDiv').style.display='none';
            document.getElementById('addMusicDiv').style.display='none';

            document.getElementById('showSingerDiv').style.display='none';
            document.getElementById('addSingerDiv').style.display='none';

            document.getElementById('showMusicListDiv').style.display='none';
            document.getElementById('addMusicListDiv').style.display='none';

            document.getElementById('showOrderDiv').style.display='none';
        }
    </script>
    <style>
        body{
            background-image: url("img/login/back.jpg");
            width: 100%;
            height: 100%;
            position: fixed;
            background-repeat: no-repeat;
            background-position: 0px,0px;
            background-size: 100% 100%;
        }
    </style>
</head>
<body  >
    <!--导航 -->
    <div style="width: 80%;margin-left: 10%;">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#left_tab,#top_right">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">网站后台管理</a>
            </div>
            <ul id="top_right" class="collapse navbar-collapse nav navbar-nav navbar-right"	style="margin-right: 20px;">
                <c:if test="${Admin.name==null}">
                    <li><a style="font-size:16px;" href="login.jsp">登录</a></li>
                    <li><a style="font-size:16px;" href="register.jsp">注册</a></li>
                </c:if>
                <c:if test="${Admin.name!=null}">
                    <li>
                        <a style="font-size:16px;color: #337ab7;">欢迎管理员：&nbsp;&nbsp;${Admin.name}</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath}/admin?method=exit">退出登录</a>
                    </li>
                </c:if>
            </ul>
            <!--左侧边栏 -->
            <div id="left_tab" style="margin-top: 70px;" class="collapse navbar-default navbar-collapse">
                <ul class="nav panel-group" id="myPanel">
                    <!--栏目-->
                    <li class="panel">
                        <a href="#sub1" data-toggle="collapse" data-parent="#myPanel"> 用户管理
                            <span class="glyphicon glyphicon-triangle-bottom pull-right"></span>
                        </a>
                        <ul id="sub1" class="nav collapse panel-collapse">
                            <li>
                                <a href="#" id="showUser">
                                    <span class="glyphicon glyphicon-consumer"></span>&nbsp;&nbsp;<b>用户列表</b>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="panel">
                        <a href="#sub2" data-toggle="collapse" data-parent="#myPanel"> 商品管理
                            <span class="glyphicon glyphicon-triangle-bottom pull-right"></span>
                        </a>
                        <ul id="sub2" class="nav panel-collapse collapse">
                            <li>
                                <a href="#" id="showGoods">
                                    <span class="glyphicon glyphicon-record"></span>&nbsp;&nbsp;查看商品
                                </a>
                            </li>
                            <li>
                                <a href="#" id="addGoods">
                                    <span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;添加商品
                                </a>
                            </li>
                            <li>
                                <a href="#" id="showGoodsType">
                                    <span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;查看商品分类
                                </a>
                            </li>
                            <li>
                                <a href="#" id="showBrand">
                                    <span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;查看商品品牌
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="panel">
                        <a href="#sub3" data-toggle="collapse" data-parent="#myPanel"> 音乐管理
                            <span class="glyphicon glyphicon-triangle-bottom pull-right"></span>
                        </a>
                        <ul id="sub3" class="nav panel-collapse collapse">
                            <li>
                            <a href="#" id="showMusic">
                                <span class="glyphicon glyphicon-record"></span>&nbsp;&nbsp;所有音乐
                            </a>
                        </li>
                            <li>
                                <a href="#" id="addMusic">
                                    <span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;添加音乐
                                </a>
                            </li>
                            <li>
                                <a href="#" id="showSinger">
                                    <span class="glyphicon glyphicon-record"></span>&nbsp;&nbsp;所有歌手
                                </a>
                            </li>
                            <li>
                                <a href="#" id="addSinger">
                                    <span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;添加歌手
                                </a>
                            </li>
                            <li>
                                <a href="#" id="showMusicList">
                                    <span class="glyphicon glyphicon-record"></span>&nbsp;&nbsp;所有歌单
                                </a>
                            </li>
                            <li>
                                <a href="#" id="addMusicList">
                                    <span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;添加歌单
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="panel">
                        <a href="#sub4" data-toggle="collapse" data-parent="#myPanel"> 订单管理
                            <span class="glyphicon glyphicon-triangle-bottom pull-right"></span>
                        </a>
                        <ul id="sub4" class="nav panel-collapse collapse">
                            <li>
                                <a href="#" id="showOrder">
                                    <span class="glyphicon glyphicon-record"></span>&nbsp;&nbsp;查看订单
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>


        <!--右侧部分-->
        <div class="page_main">
            <%--      用户管理     --%>
            <div id="showUserDiv" style="display:none; padding-left:30px">
                <iframe class="dv_content" frameborder="0" scrolling="no" src="/consumer?method=showUser&currentPage=1">
                </iframe>
            </div>
            <%--      修改密码     --%>
            <div id="changePassDiv" style="display:none; padding-left:30px">
                <iframe class="dv_content" frameborder="0" scrolling="no" src="/admin?method=checkAdminById&aid=${Admin.id}">
                </iframe>
            </div>
            <%--      查看商品    --%>
            <div id="showGoodsDiv" style="display:none; padding-left:30px">
                <iframe class="dv_content" frameborder="0" scrolling="no" src="/goods?method=showAll&currentPage=1">
                </iframe>
            </div>
            <%--      添加商品    --%>
            <div id="addGoodsDiv" style="display:none; padding-left:30px">
                <iframe class="dv_content" frameborder="0" scrolling="no" src="addGoods.jsp">
                </iframe>
            </div>
            <%--      商品类别查看    --%>
            <div id="showGoodsTypeDiv" style="display:none; padding-left:30px">
                <iframe class="dv_content" frameborder="0" scrolling="no"  src="/type?method=showType&currentPage=1">
                </iframe>
            </div>
                <%--      商品品牌查看    --%>
                <div id="showBrandDiv" style="display:none; padding-left:30px">
                    <iframe class="dv_content" frameborder="0" scrolling="no"  src="/brand?method=showBrand&currentPage=1">
                    </iframe>
                </div>
            <%--      所有音乐    --%>
            <div id="showMusicDiv" style="display:none; padding-left:30px">
                <iframe class="dv_content" frameborder="0" scrolling="no" src="/music?method=showAllMusic&currentPage=1">
                </iframe>
            </div>
            <%--      添加音乐    --%>
            <div id="addMusicDiv" style="display:none; padding-left:30px">
                <iframe class="dv_content" frameborder="0" scrolling="no" src="addMusic.jsp">
                </iframe>
            </div>
                <%--      所有歌手    --%>
                <div id="showSingerDiv" style="display:none; padding-left:30px">
                    <iframe class="dv_content" frameborder="0" scrolling="no" src="/singer?method=showSinger&currentPage=1">
                    </iframe>
                </div>
                <%--      添加歌手    --%>
                <div id="addSingerDiv" style="display:none; padding-left:30px">
                    <iframe class="dv_content" frameborder="0" scrolling="no" src="/addSinger.jsp">
                    </iframe>
                </div>
                <%--      所有歌单    --%>
                <div id="showMusicListDiv" style="display:none; padding-left:30px">
                    <iframe class="dv_content" frameborder="0" scrolling="no" src="/songList?method=showAll&currentPage=1">
                    </iframe>
                </div>
                <%--      添加歌单    --%>
                <div id="addMusicListDiv" style="display:none; padding-left:30px">
                    <iframe class="dv_content" frameborder="0" scrolling="no" src="addSongList.jsp">
                    </iframe>
                </div>
            <%--      查看订单    --%>
            <div id="showOrderDiv" style="display:none; padding-left:30px">
                 <iframe class="dv_content" frameborder="0" scrolling="no" src="/order?method=showAll&currentPage=1">
                 </iframe>
            </div>
        </div>
    </div>
</body>
</html>
